<script setup>
import { ref, watch } from 'vue';
import { QUESTION_SORT_BY } from '@/assets/js/const';
import Box3D from '@/components/Box3D.vue'

const emit = defineEmits(['clickSort'])

const sortList = [
  { text: '按阅读数排序', value: QUESTION_SORT_BY.READ_NUMBER },
  { text: '按时间排序', value: QUESTION_SORT_BY.CREATED_TIME },
  { text: '按问题排序', value: QUESTION_SORT_BY.INITIAL },
  // { text: '按标签排序', value: QUESTION_SORT_BY.TAG },
]
const sortBy = ref(sortList[0].value)
watch(sortBy, (newSortBy) => {
  emit('clickSort', newSortBy)
}, { immediate: true })
</script>

<template>
  <div class="sort-bar">
    <Box3D
      v-for="item in sortList"
      :key="item.value"
      :width="100"
      :height="40"
      :thickness="sortBy === item.value ? 20 : 40"
      @click="() => sortBy = item.value"
      background="#606266"
    >
      <div class="front">{{ item.text }}</div>
    </Box3D>
  </div>
</template>

<style lang="sass" scoped>

.sort-bar
  transform-style: preserve-3d
  transform-origin: left top
  transform: rotateX(20deg) rotateY(20deg)
  color: white
  position: absolute
  left: 10vw
  top: 10vh
  .front
    width: 100%
    height: 100%
    display: flex
    align-items: center
    justify-content: center
    color: white
    cursor: pointer
    font-size: 14px
</style>